<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title" style="color: #aaaaaa">首页管理</span>
      </template>
      <el-menu-item-group style="background-color: #2c2c2c">
        <span slot="title"></span>
        <router-link to="/LunBo"
          ><el-menu-item index="1-1" style="color: #aaaaaa"
            >轮播图管理</el-menu-item
          ></router-link
        >
        <router-link to="/Category">
          <el-menu-item index="1-2" style="color: #aaaaaa"
            >分类区管理</el-menu-item
          >
        </router-link>
        <router-link to="/recommend">
          <el-menu-item index="1-3" style="color: #aaaaaa"
            >为您推荐管理</el-menu-item
          >
        </router-link>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title" style="color: #aaaaaa">商品管理</span>
      </template>
      <el-menu-item-group style="background-color: #2c2c2c">
        <span slot="title"></span>
        <router-link to="/goods_cate">
          <el-menu-item index="1-1" style="color: #aaaaaa"
            >分类管理</el-menu-item
          >
        </router-link>
        <router-link to="/goods_brand">
          <el-menu-item index="1-2" style="color: #aaaaaa"
            >品牌管理</el-menu-item
          >
        </router-link>
        <router-link to="/goods_change">
          <el-menu-item index="1-3" style="color: #aaaaaa"
            >商品管理</el-menu-item
          >
        </router-link>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>